<template>
    <div class="activity_box" :style="{width:tranString}">
        <div class="seconds_box" v-if="seconds.length>0&&product.type != 2" style="margin-bottom:6px">
            <text class="seconds_box_title">秒杀</text>
        </div>
        <div v-for="item in activity" style="margin-bottom:6px" v-if="product.type != 2">
            <div class="activity_three" v-if="item.type =='7' || item.type =='9'">
                <text class="activity_titleTwo">{{item.title}}</text>
            </div>
            <div class="activity_Two" v-if="item.type ==6 || item.type ==3 || item.type ==4 || item.type ==5">
                <text class="activity_titleTwo">{{item.title}}</text>
            </div>
            <div class="activity_four" v-if="item.type ==0">
                <text class="activity_title">{{item.name}}</text>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                single:[],
                full:[],
                activity:[],
                seconds:[],
                activityBox:[]
            }
        },
        mounted(){
            var _this = this
            this.promotions.forEach(function(item){
                if (item.type == '7' || item.type == '9'){
                    _this.single.push(item)
                } else if (item.type == '3' || item.type == '4' || item.type == '5'){
                    _this.full.push(item)
                }else if (item.type == '8') {
                    _this.seconds.push(item)
                }
            })
            _this.activity = (_this.single.concat(_this.coupon)).concat(_this.full);
        },
        created() {
            this.tranString=this.tranString+'px'
        },
        props:[
            'tranString','coupon','promotions','product'
        ]
    }
</script>

<style scoped>
    .activity_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        /*height: 35px;*/
    }
    .activity_titleTwo{
        font-size: 16px;
        color:white;
        display: block;
        line-height: 22px;
    }
    .activity_title {
        font-size: 16px;
        color: rgba(236, 95, 88, 1);
        display: block;
        line-height: 22px;
    }

    .activity_three{
        border-radius: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-right: 10px;
        background-image: linear-gradient(to right, #ff9966, #ff5e62);
        /*margin-bottom: 10px;*/
        padding-top:4px;
        padding-bottom: 4px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .activity_Two{
        border-radius: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-right: 10px;
        /*margin-bottom: 10px;*/
        background-image: linear-gradient(to right, #fc4a1a, #f7b733);
        padding-top:4px;
        padding-bottom: 4px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .activity_four{
        border-radius: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-right: 10px;
        background-color: rgba(236, 95, 88, 0.2);
        padding-top:4px;
        padding-bottom: 4px;
        padding-left: 12px;
        padding-right: 12px;
        /*margin-bottom: 10px;*/
    }
    .activety_left{
        background-color: rgba(236, 95, 88, 0.2);
        padding-top:2px;
        padding-bottom: 2px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .seconds_box{
        border-radius: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-right: 10px;
        padding-top:2px;
        padding-bottom: 2px;
        padding-left: 12px;
        padding-right: 12px;
        border-style: solid;
        border-width: 1px;
        border-color:rgba(236, 95, 88, 1) ;
    }
    .seconds_box_title{
        font-size: 16px;
        color: rgba(236, 95, 88, 1);
        display: block;
        line-height: 22px;
    }
</style>
